// JavaScript Document
Ext.setup({
    tabletStartupScreen: 'image/tablet_startup.gif',
    phoneStartupScreen: 'image/phone_startup.gif',
    icon: 'image/icon.gif',
    glossOnIcon: false,
    onReady: function() {
		
		var topToolbar = new Ext.Toolbar({
                dock : 'top',
                ui: 'dark',
                title: 'Sencha Twitter'
    	});

    	var tpl = new Ext.XTemplate(
                '<div id="tweet_container">',
                    '<tpl for=".">',
                        '<div class="tweet_data">',
                        '<div class="tweet_avatar">',
                            '<img width="30" height="30" src="{profile_image_url}"/>',
                        '</div>',
                        '<div class="tweet_content">',
                            '<a class="user" href="http://twitter.com/{from_user}">{from_user}</a>&nbsp;',
                            '{text}',
                        '</div>',
                        '<div class="clear"></div>',
                        '</div>',
                    '</tpl>',
                '</div>'
    	 );

   		 var resultPanel = new Ext.Panel({
                layout: 'fit',
                style: 'padding-bottom: 10px;',
                tpl: tpl
    	 });

   		 var searchPanel = new Ext.Panel({
                padding: 10,
                layout: {
                    type: 'hbox',
                    align: 'stretch'
                },
                items: [{
                    flex: 4,
                    xtype: 'textfield',
                    style: 'margin-right: 10px;',
                    id: 'textquery'
                },{
                    flex: 2,
                    xtype: 'button',
                    text: 'Search',
                    handler: function() {
                        var query = Ext.getCmp("textquery").getValue();
                        Ext.Ajax.request({
                            url: 'index.php?act=search&q='+query,
                            success: function(e) {
                                var obj = Ext.util.JSON.decode(e.responseText);
                                var msg = obj.results;
                                var html = tpl.apply(msg);
                                resultPanel.update(html);
                            }
                        });
                    }
                }]
    	  });

    	  var myPanel = new Ext.Panel({
                dockedItems: [topToolbar],
                items: [searchPanel, resultPanel],
                scroll: 'vertical',
                style: 'background: #DDEEF6;',
                fullscreen : true
     	});
    }
});
